<script setup lang="ts">

import AppTable from "@/components/app/AppTable.vue";
import {ref, watch} from "vue";
import {alertSuccess, confirm} from "@/utils/alert.ts";
import {removeUrlFormWhitelist} from "@/api/system";

defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Whitelist",
});
const props = withDefaults(defineProps<{
  showDialog: boolean;
  beforeClose?: (() => void);
}>(), {
  showDialog: false,
  beforeClose: (() => {
  }),
});

const tableRef = ref();
const dialogVisible = ref(false);

const handleBtnClick = (key: string, data: any[] | null) => {
  if (key === 'delete') {
    if (data && data.length > 0) {
      handleDeleteBatch(data.map(item => item.id))
    }
  }
}
const handleDeleteBatch = (ids: string[]) => {
  confirm('确定要删除吗？', async () => {
    await removeUrlFormWhitelist(ids)
    tableRef.value.queryData();
    alertSuccess('删除成功')
  })
};
watch(() => props.showDialog, (value) => {
  dialogVisible.value = value
})

</script>

<template>
  <el-dialog v-model="dialogVisible"
             align-center
             :destroy-on-close="true"
             :before-close="props.beforeClose"
             title="白名单管理" :close-on-click-modal="false">
    <AppTable
      ref="tableRef"
      :search-info="[{
      label: '查询参数',
      key: 'keyword',
      value: ''
    }]"
      :margin-able="false"
      :btn-show="{add: false,edit: false,delete: true, export:false,import:false}"
      :pageable="false"
      :table-style="{
                height: '40vh'
              }"
      api-method="get"
      :without-border="false"
      api-path="/api/sys/url/queryWhitelist"
      @handle-btn-click="handleBtnClick"
      @multiple-selection="data => {
        console.log(data)
      }">
      <template v-slot:actionBar>
      </template>
      <template v-slot:tableColumn>
        <el-table-column prop="httpMethod" label="请求方法" align="center" width="90">
          <template #default="scope">
            <el-tag :type="scope.row.httpMethod === 'GET' ? 'primary' :
                               scope.row.httpMethod === 'POST' ? 'success' :
                               scope.row.httpMethod === 'PUT' ? 'warning' :
                               scope.row.httpMethod === 'DELETE' ? 'danger' : ''">
              {{ scope.row.httpMethod }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="httpUrl" label="请求地址" align="left"/>
        <el-table-column prop="allowAnonymous" label="匿名访问" align="center" width="90">
          <template #default="scope">
            <el-tag v-if="scope.row.allowAnonymous == 0" type="success" size="small">允许
            </el-tag>
            <el-tag v-if="scope.row.allowAnonymous == 1" type="danger" size="small">不允许
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="100">
          <template v-slot="scope">
            <el-button type="danger" size="small" @click="handleDeleteBatch([scope.row.id])">删除
            </el-button>
          </template>
        </el-table-column>
      </template>
    </AppTable>
  </el-dialog>
</template>

<style scoped>

</style>
